<template>
	<view class="home">
		<!-- 顶部 -->
		<view class="top">
			<view class="name">
				住享家
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" indicator-active-color="#ffffff">
				<swiper-item v-for="(item,index) in bannerList" :key="item.id">
					<image style="width: 100%; height: 100%;" :src="getImgUrl(item.mszs_banner)">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!-- logo -->
		<scroll-view scroll-x="true">
			<view class="h-logo">
				<!-- active -->
				<!-- v-for="(item,index) in groggery" :key="item.id" @click="chtow(index,item.id)" -->
				<template>
					<view :class="{'active':active === item.id}" class="h-logoitem" v-for="(item,index) in groggery"
						:key="item.id" @click="chtow(index,item.id)">
						<image
							src="https://img1.baidu.com/it/u=3941843963,3989677641&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=472"
							mode=""></image>
					</view>
				</template>
				<!-- 				<view v-else v-if="groggery.length" class="None">
					暂无数据~
				</view> -->
			</view>
		</scroll-view>
		<!-- 酒店房间 -->
		<view class="h-room">
			<view v-if="groggeryromm.length == 0" class="None">
				暂无数据~
			</view>
			<view class="h-roomitem" v-else v-for="item in groggeryromm" @click="roomdetail(item,item.fjNumber)">
				<view>
					<view class="h-roomimg">
						<image
							src="https://img0.baidu.com/it/u=131055624,1683940160&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
							mode=""></image>
					</view>
					<view class="h-roominfo">
						<view class="omit" style="width: 50%; padding-left: 5rpx;">
							{{item.fxName}}
						</view>
						<view class="omit" style="width: 50%;">
							入住人：{{item.ruzhuren? item.ruzhuren:'暂无'}}
						</view>
						<view class="omit" style="width: 50%;  padding-left: 5rpx;">
							价格：{{item.fjPrice}}
						</view>
						<view class="omit" style="width: 50%;">
							房间号：{{item.fjNumber? item.fjNumber: '暂无'}}
						</view>
					</view>
				</view>
				<switch :checked="item.status" disabled color="#FFE2BC" style="transform:scale(0.6)" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getIndexList,
		getRoomDetail
	} from '@/api/index.js'
	import
	getImgUrl
	from '@/utils/img.js'
	export default {
		data() {
			return {
				roomList: [],
				bannerData: [], //banner所有图
				allIndex: [], //首页的所有信息
				roomName: '', //排房页面房间名称
				priceType: '', //排房页面价格排序
				roomStatus: '', // 排房页面状态排序
				status: true, // 按钮状态
				show: false, //抽屉
				active: 1, //酒店选中状态
				groggery: [], //酒店
				groggeryromm: [], //房间
				bannerList: [],
				oldGgromm: [], // 用于排房
				requestParams: {},
				myarray: [], // 酒店房间
				current: '', //房间图片下标
				// 轮播图
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500, //滑动动画时长
				bannerList: [],
				index: 0
			}
		},
		onShow() {
			this.getDataList(this.requestParams)
			if (this.index == 0) {
				this.index = uni.getStorageSync('index')
				this.active = uni.getStorageSync('active')
				getIndexList(this.requestParams).then(res => {
					if (res.code == 405) {
						uni.showToast({
							title: '余额不足，请先充值',
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/recharge/recharge'
						})
					} else {
						this.bannerList = res.data.banner
						let orderId = res.data.hotel.orderId //订单id
						this.allIndex = res.data
						this.groggery = res.data.hotel // 酒店
						if (res.data.hotel.length > 0) {
							this.active = res.data.hotel[this.index].id
							this.groggeryromm = this.groggery[this.index].roomList
							this.oldGgromm = this.groggery[this.index].roomList
						}
					}
				})
			}
		},
		onLoad(e) {
			if (e.checked == 'true') {
				Object.assign(this.requestParams, {
					roomTypeSort: 1
				})
			}
			if (e.priceType == '0') {
				Object.assign(this.requestParams, {
					priceSort: 0
				})
			}
			if (e.priceType == '1') {
				Object.assign(this.requestParams, {
					priceSort: 1
				})
			}
			if (e.roomType == '0') {
				Object.assign(this.requestParams, {
					statusSort: 0
				})
			}
			if (e.roomType == '1') {
				Object.assign(this.requestParams, {
					statusSort: 1
				})
			}
		},
		filters: {
			//超过20位显示...
			ellipsis: function(value) {
				if (!value) return "";
				if (value.length > 9) {
					return value.slice(0, 9) + "...";
				}
				return value;
			}
		},
		methods: {
			// 房间图片current
			onchange(event) {
				this.current = ++event.target.current
			},
			getDataList(params) {
				let dataList = []
				getIndexList(params).then(res => {
					console.log('res', res);
					if (res.code == 405) {
						uni.showToast({
							title: '余额不足，请先充值',
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/recharge/recharge'
						})
					} else {
						this.bannerList = res.data.banner
						let orderId = res.data.hotel.orderId //订单id
						this.allIndex = res.data
						this.groggery = res.data.hotel // 酒店
						if (res.data.hotel.length > 0) {
							this.active = res.data.hotel[0].id
							this.groggeryromm = this.groggery[0].roomList
							this.oldGgromm = this.groggery[0].roomList
						}
					}
				})
			},
			//房间详情
			roomdetail(item, fjNumber) {
				if (item.status == 1 && item.orderId != null) {
					uni.navigateTo({
						url: `/pages/room_details/room_details?id=` + item.orderId + '&fjNumber=' + fjNumber
					})
				} else {
					uni.showToast({
						title: '该房间暂无入住信息！',
						icon: 'none',
						duration: 1000
					})
				}
				// if (item.fjImg.length > 0) {
				// 	this.myarray = item.fjImg.split(",")
				// }
			},
			chtow(index, id) {
				this.index = index
				this.active = id
				uni.setStorageSync('index', index)
				uni.setStorageSync('active', id)
				this.groggeryromm = this.groggery[index].roomList
				this.orderId = this.groggery[index].roomList.orderId
			},
			// 获取图片地址
			getImgUrl(url) {
				return getImgUrl(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		background-color: #FFFFFF;

		.top {
			background-color: #FFE2BC;
			width: 100%;
			height: 180rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		//轮播图
		.uni-margin-wrap {
			.swiper {
				height: 320rpx;
			}
		}

		.h-logo {
			width: 100%;
			height: 180rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			padding-left: 15rpx;
			border-top: 4rpx solid #F5E9DA;
			border-bottom: 4rpx solid #F5E9DA;
			overflow: hidden;

			.None {
				color: #FFE2BC;
				padding-left: 290rpx;
			}

			.active {
				border: 2rpx solid #FE6767;
			}

			.h-logoitem {
				width: 130rpx;
				height: 130rpx;
				margin-left: 15rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx 1rpx #ECECEC;

				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}

		.h-room {
			width: 100%;
			// height: 600rpx;
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
			overflow: hidden;
			padding-top: 10rpx;

			.None {
				color: #FFE2BC;
				height: 550rpx;
				padding-top: 200rpx;
			}

			.h-roomitem {
				width: 350rpx;
				height: 180rpx;
				border-radius: 15rpx;
				margin-bottom: 15rpx;
				position: relative;

				.h-roomimg {
					width: 350rpx;
					height: 180rpx;
					border-radius: 15rpx;

				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}

				.h-roominfo {
					width: 350rpx;
					height: 60rpx;
					background: rgba(255, 255, 255, 0.7);
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					flex-wrap: wrap;
					font-size: 22rpx;
					align-items: center;
					justify-content: start;

					.omit {

						width: 100%; //定宽 
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
					}
				}


				switch {
					position: absolute;
					right: -5%;
					top: -1%;
				}
			}


		}

	}
</style>